@import "color";
@import "width";
@import "common";

/*banner区域 图片轮播区域*/

#index_banner {
    @extend %basestyle;
    margin: 0 auto;
    height: 505px;
    // background: $header-bannercolor;

    position: relative;

    &:hover {
        .arrow {
            span {
                display: block;
            }
        }
    }

    .sliderBox {
        position: relative;
        min-width: 1090px;
        height: 505px;

        .sliderList {
            position: absolute;
            top: 0;
            left: 50%;
            height: 400px;
            margin-left: -960px;

            li {
                position: absolute;
                width: 1920px;
                height: 505px;
                opacity: 0;


                img {
                    display: inline-block;

                    width: 1920px;
                    vertical-align: middle;
                    height: 505px;

                }
            }
        }

        .num {
            position: absolute;
            left: 210px;
            bottom: 50px;

            li {
                float: left;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                text-align: center;
                line-height: 20px;
                cursor: pointer;
                margin: 10px;
                background-color: white;
                color: red;
                z-index: 99;
            }
        }
    }

    .num li:hover,
    .num li.hover {
        background-color: red;
        color: white;
    }

    .arrow {
        span {
            display: none;
            position: absolute;
            width: 30px;
            height: 80px;
            font-size: 40px;
            text-align: center;
            line-height: 80px;
            top: 50%;
            margin-top: -40px;
            opacity: .4;
            color: white;
            background-color: #000;
            cursor: pointer;

            &:nth-child(1) {
                left: 170px;
            }

            &:nth-child(2) {
                right: 0px;
            }
        }
    }

    .banner_list {
        width: 164px;
        height: 460px;
        border: $border-base;
        position: absolute;
        top: 0px;
        left: -2px;


        li {
            display: flex;
            width: 151px;
            height: 37.33px;
            border-bottom: $border-base;
            padding: 0px 3px 0px 10px;
            background: linear-gradient(90deg, red, #ff3264);
            text-align: center;
            line-height: 38.33px;
            align-items: center;


            &:hover {
                background: $color;

                a {
                    color: #ff2337;
                }

                i {
                    color: #ff2337;
                }
            }

            a {
                display: block;
                width: 70px;
                height: 30px;
                // border: $border-base;
                font-size: 14px;
                font-style: normal;
                color: #fff;
                margin-top: -2px;
            }

            span {
                width: 20px;
                height: 20px;
                padding: 0px 20px 0px 4px;
            }

            img {
                width: 20px;
                height: 20px;
            }

            i {
                font-size: 14px;
                color: $color;
                margin-top: 5px;
                margin-left: 10px;
            }

            .banner_list_xlcd {
                position: absolute;
                width: 1000px;
                height: 460px;
                border: $border-base1;
                z-index: 9999;
                left: 165px;
                top: 0px;
                background: $color;
                font-size: 26px;
                display: none;
            }
        }
    }

    .index_banner_bottom_wrap {
        position: absolute;
        width: 100%;
        background: #0000004D;
        bottom: 0px;
        z-index: 8888;
    }

    .index_banner_bottom {
        position: absolute;
        width: 1090px;
        height: 40px;
        // border: $border-base;
        bottom: 0px;
        background: #0000004D;

        .index_banner_bottom_list {
            // position: absolute;
            float: left;
            width: 468px;
            height: 44px;
            display: flex;
            align-items: center;
            // border: $border-base1;
            justify-content: space-between;

            //    left: 212px;
            a {
                width: 48px;
                height: 13.6px;
                margin-top: 4px;
            }

            i {
                font-size: 22px;
                padding: 0px 7px 0px 0px;
            }
        }

        .index_banner_bottom_app {
            // position: absolute;
            float: right;
            //   right: 218px;
            width: 194.36px;
            height: 40px;
            // border: $border-base;
            display: flex;
            justify-content: space-around;
            align-items: center;

            a {
                width: 169.36px;
                height: 13.6px;
                text-align: right;


            }

            i {

                font-size: 12px;
            }

        }

        li {
            display: flex;
        }

        i {

            color: $color;
        }

        a {
            display: block;
            // border: $border-base;           
            color: $color;

            &:hover {
                text-decoration: underline;
            }
        }

    }

}

#index_contain_wrap {
    background: #F6F6F6
}


#index_contain {
    @extend %basestyle;
    height: 10700px;
    // background: $index_containcolor;
    position: relative;

    .index_contain_one {
        width: 1110px;
        height: 308px;
        border: $border-base;
        background: url(../img/index_contain/one.png) center;
        margin-top: 20px;
        margin-left: -10px;
    }

    .index_left {
        width: 99px;
        height: 672px;
        border: 1px solid#e9e9e9;
        position: absolute;
        left: -107px;

        .aside_top {
            width: 99px;
            height: 49px;
            background: url(../img/index_contain/sports/aside_left.jpg) no-repeat;
            display: inline-block;
        }

        .index_left_two {
            width: 99px;
            height: 52px;
            background: $color;

            // border: 1px solid#888888;
            a {
                width: 88px;
                height: 51px;
                display: inline-block;
                font-size: 14px;
                font-weight: 700;
                padding-left: 9px;
                text-align: left;
                line-height: 51px;
                border-top: 1px solid#888888;
                border-bottom: 1px solid#888888;
            }

        }

        .index_left_three {
            width: 99px;
            height: 363px;
            padding-top: 10px;
            border-bottom: 1px solid#888888;
            background: $color;

            li {
                width: 97px;
                height: 32px;

                span {
                    color: #999999;
                    width: 88px;
                    height: 32px;
                    display: inline-block;
                    padding-left: 9px;
                    font-size: 12px;
                    text-align: left;
                    line-height: 32px;

                }

            }
        }

        .aside_bottom {
            width: 99px;
            height: 198px;
            display: inline-block;
            background: url(../img/index_contain/sports/index_aside_bottomimg.png) no-repeat;
        }


    }


    // 右边栏
    .index_right {
        width: 62px;
        height: 243px;
        background: $color;

        border: 1px solid#888888;

        li {
            width: 62px;
            height: 59px;
            border-top: 1px solid#888888;
            border-bottom: 1px solid#888888;

            a,
            span {
                display: inline-block;
                width: 62px;
                height: 61px;
                padding-top: 12px;
                text-align: center;
                line-height: 61px;

            }

            &:hover {
                background: #666666;

                a,
                span {
                    color: red;
                }
            }
        }
    }


    .index_sports,
    .index_mzzq,
    .index_grjq,
    .index_qsg,
    .index_sbps,
    .index_mssx,
    .index_fsxx,
    .index_jjsh,
    .index_smjd,
    .index_myzq,
    .index_yybj {
        width: 1100px;
        height: 851px;
        // border: $border-base2;
        margin-left: -6px;

        .sports_outhouse {
            position: relative;
            height: 48px;
            border: $border-base;
            background: $color;
            padding: 25px 0px 0px;
            display: flex;

            .sports_outhouse_bt {
                font-size: 22px;
                color: #333333;
                font-weight: 700;
            }

            .sports_outhouse_ul {
                display: flex;
                justify-content: space-between;
                width: 334px;
                height: 32px;
                // border: $border-base1;
                margin: 7px 20px;
                font-size: 14px;

                li {
                    &:nth-child(3) {
                        a {
                            color: #666666;

                            &:hover {
                                text-decoration: underline;
                            }
                        }
                    }

                    &:nth-child(2),
                    &:nth-child(4),
                    &:nth-child(5) {
                        a {
                            color: #fE060c;

                            &:hover {
                                text-decoration: underline;
                            }
                        }
                    }
                }

            }

            .index_sports_moreh {
                display: block;
                width: 72px;
                height: 33.6px;
                // border: $border-base2;
                position: absolute;
                right: 0px;
                top: 33px;

                a {
                    color: #999999;
                    font-size: 14px;

                    &:hover {
                        text-decoration: underline;
                    }
                }

                i {
                    color: #999999;
                    font-size: 16px;

                }


            }
        }







        /*热卖品牌*/
        .hotpp {
            width: 1098px;
            height: 216px;
            // border: $border-base2;
            margin-top: 20px;
            background: #fff;
            // position: relative;

            .hotpp_bt {
                font-size: 16px;
                color: #000;
                font-weight: 700;
                text-indent: 20px;
                line-height: 48px;
                height: 48px;
                border-bottom: 1px solid #eaeaea;
            }

            .hotpp_img {
                display: flex;

                &:first-child {
                    border-left: 0;
                }

                li {


                    width: 219px;
                    height: 167px;
                    //   border: 1px solid #e9e9e9;
                    border-left: 1px solid #e9e9e9;

                    a {
                        display: inline-block;
                        position: relative;
                        zoom: 1;
                        text-align: center;

                        img {
                            margin: 25px 45px;
                        }
                    }
                }
            }
        }

    }


    .index_sports_imglist {
        $height: 538px;
        width: 1100px;
        height: $height;
        // border: $border-base2;
        display: flex;

        .index_sports_imglist_L {
            position: relative;
            width: 330px;
            height: $height;
            // border: $border-base2;
            background: url(../img/index_contain/sports/1.jpg);

            .index_sports_imglist_L_ul {

                width: 306px;
                height: 100px;
                //  border: $border-base2;
                position: absolute;
                left: 24px;
                bottom: 24px;
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;

                li {
                    width: 82px;
                    height: 42px;
                    //  border: $border-base2;

                    a {
                        // background: $color;
                        display: block;
                        width: 80px;
                        height: 42px;
                        text-align: center;
                        line-height: 42px;
                        border-radius: 40px;
                        border: 1px solid #eee;
                        box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);

                        &:hover {
                            color: #fE060c;
                        }

                    }
                }
            }

        }










        .index_sports_imglist_M {
            width: 550px;
            height: 538px;
            // border: $border-base2;
            background: $color;
            overflow: hidden;

            .sports_imglist_M_four {
                width: 550px;
                height: 540px;
                // border: $border-base2;
                display: flex;
                flex-wrap: wrap;

                li {
                    width: 274px;
                    height: 268px;
                    border: 1px solid#e9e9e9;
                    border-width: 0 1px 1px 0;

                    h2 {
                        display: block;
                        width: 254px;
                        height: 24px;
                        // border: $border-base2;
                        font-size: 24px;
                        text-align: center;
                        line-height: 24px;
                        margin: 30px 10px 0px 10px;
                        color: #333333;
                        font-weight: 400;
                    }

                    p {
                        width: 254px;
                        height: 20px;
                        // border: $border-base2;
                        font-size: 14px;
                        color: #666666;
                        text-align: center;
                        margin: 10px 10px 14px;
                    }

                    img {
                        width: 184px;
                        height: 144px;
                        margin-left: 43px;
                        background: #fff;
                    }
                }
            }

        }

        .index_sports_imglist_R {
            width: 219px;
            height: $height;
            // border: $border-base2;
            background: #fff;
            position: relative;

            h3 {
                display: block;
                width: 208px;
                height: 58px;

                padding: 0 0 0 10px;
                font-size: 16px;
                line-height: 58px;
                color: #333;
                border: 1px solid#e9e9e9;
                border-left-width: 0;
                font-weight: 700;
            }

            li {
                width: 205px;
                height: 92px;
                border-bottom: 1px dotted #e9e9e9;
                padding: 27px 14px 0 0;

                img {
                    width: 75px;
                    height: 75px;
                    float: left;
                    margin: 2px 2px;

                }

                span {
                    display: block;
                    width: 119px;
                    height: 36px;
                    font-size: 100%;
                    line-height: 18px;
                    font-weight: 400;
                    float: left;
                    overflow: hidden;
                }

                p {
                    //   display: block;
                    font-size: 18px;
                    color: #FF1E32;
                    margin-top: 6px;

                    b {
                        font-size: 20px;
                    }
                }
            }

            .swiper-container {
                width: 219px;
                height: 478px;

            }

            .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;

                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            }

            /*修改了小圆点的位置*/
            .swiper-pagination {
                color: #000;
                position: absolute;
                top: 18px;
                right: 5px;
                margin: 5px;
            }

            /*修改了小圆点之间的距离*/
            .swiper-pagination-bullet {
                margin: 3px;
            }

        }

    }


    .index_mzzq {
        .index_sports_imglist {
            .index_sports_imglist_L {
                background: url(../img/index_contain/sports/mz1.jpg);
            }
        }

    }

    .index_grjq {
        .index_sports_imglist {
            .index_sports_imglist_L {
                background: url(../img/index_contain/sports/grjq1.jpg);
            }
        }

    }

    .index_qsg {
        .index_sports_imglist {
            .index_sports_imglist_L {
                background: url(../img/index_contain/sports/qsg1.jpg);
            }
        }

    }

    .index_sbps {
        .index_sports_imglist {
            .index_sports_imglist_L {
                background: url(../img/index_contain/sports/sbps1.jpg);
            }
        }

    }


    .index_mssx {
        .index_sports_imglist {
            .index_sports_imglist_L {
                background: url(../img/index_contain/sports/mssx1.jpg);
            }
        }

    }


    .index_fsxx {
        .index_sports_imglist {
            .index_sports_imglist_L {
                background: url(../img/index_contain/sports/fsxx1.jpg);
            }
        }

    }



    .index_jjsh {
        .index_sports_imglist {
            .index_sports_imglist_L {
                background: url(../img/index_contain/sports/jjsh1.jpg);
            }
        }

    }


    .index_smjd {
        .index_sports_imglist {
            .index_sports_imglist_L {
                background: url(../img/index_contain/sports/smjd1.png);
            }
        }

    }

    .index_myzq {
        .index_sports_imglist {
            .index_sports_imglist_L {
                background: url(../img/index_contain/sports/mysh1.jpg);
            }
        }

    }

    .index_yybj {
        .index_sports_imglist {
            .index_sports_imglist_L {
                background: url(../img/index_contain/sports/yybj1.jpg);
            }
        }

    }



    .hotpp_bigarea {
        width: 1100px;
        height: 427px;
        // border: $border-base2;
        background: #fff;
        margin-left: -6px;

        .hotpp_bigarea_one {
            position: relative;
            height: 48px;
            // border: $border-base;
            background: $color;
            padding: 25px 0px 0px;
            display: flex;

            .hotpp_bigarea_bt {
                font-size: 22px;
                color: #333333;
                font-weight: 700;
            }

            .hotpp_bigarea_bq {
                font-size: 15px;
                color: #999999;
                margin-left: 10px;
                margin-top: 6px;
            }

            .hotpp_bigarea_hh {
                display: block;
                width: 72px;
                height: 33.6px;
                // border: $border-base2;
                position: absolute;
                right: 0px;
                top: 33px;

                color: #999999;
                font-size: 14px;

                &:hover {
                    text-decoration: underline;

                }


            }

            i {
                color: #999999;
                font-size: 16px;
                position: absolute;
                right: 12px;
                top: 34px;

            }
        }

        .hotpp_bigarea_two {
            width: 1098px;
            height: 355px;
            display: flex;

            // border: $border-base;
            .hotpp_bigarea_lb {
                width: 217px;
                height: 353px;

                // border: 1px solid #e9e9e9;
                img {
                    width: 219px;
                    height: 219px;
                }

                .img_text {
                    width: 219px;
                    height: 136px;
                    background: #151515;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    // border: $border-base;
                    p {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;

                        &:nth-child(1) {
                            display: inline-block;
                            width: 193px;
                            height: 29.6px;
                            // border: $border-base;
                            font-size: 20px;
                            font-weight: 700;
                            padding-top: 41px;
                            padding-bottom: 4px;
                            margin: 0 12px;
                            text-align: center;
                            color: #fff;


                        }

                        &:nth-child(2) {
                            width: 193px;
                            height: 20.8px;
                            // border: $border-base;
                            font-size: 14px;
                            margin: 0 12px;
                            text-align: center;
                            color: #fff;


                        }
                    }
                }


            }

            .swiper-container {
                width: 219px;
                height: 353px;
                position: relative;

                .swiper-pagination {
                    top: 219px;
                }

                .swiper-pagination-progressbar {
                    height: 2px;
                    background: #555555;
                    position: absolute;
                    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);

                    .swiper-pagination-progressbar-fill {
                        background: #FF1E32;
                    }
                }



                .swiper-button-prev,
                .swiper-button-next {
                    position: absolute;
                    display: none;
                    top: 35%;
                    width: 30px;
                    height: 30px;
                    margin-top: calc(-1 * var(--swiper-navigation-size)/ 2);
                    z-index: 10;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    background: #333333;
                    opacity: 0;
                }

                .swiper-button-next:after,
                .swiper-button-prev:after {
                    font-size: 16px;
                    font-weight: 700;
                    display: none;
                }

                &:hover {

                    .swiper-button-prev,
                    .swiper-button-next {
                        opacity: .6;
                    }

                    .swiper-button-next:after,
                    .swiper-button-prev:after {
                        display: block;
                    }

                }
            }

            .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;

                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            }



            .hotpp_bigarea_imglb {
                width: 885px;
                height: 354px;
                display: flex;
                flex-wrap: wrap;


                li {
                    width: 219px;
                    height: 176px;
                    border-right: 1px solid #e9e9e9;
                    border-bottom: 1px solid#e9e9e9;
                    position: relative;

                    &:hover {
                        img {
                            transform: scale(0.6);

                        }

                        p {
                            display: none;
                        }

                        .addgz {
                            display: block;

                            &:hover {
                                background: #e9e9e9;
                            }
                        }

                        .gzpeople {
                            display: block;
                        }

                        .enterpp {
                            display: block;
                        }
                    }

                    img {
                        display: block;
                        margin: 12px auto 0;
                        width: 120px;
                        height: 120px;
                        transition: all 0.2s;
                    }

                    p {
                        margin: 10px -90px 0;
                        text-align: center;
                        white-space: nowrap;
                        overflow: hidden;
                        font-size: 14px;
                        font-weight: 700;
                    }

                    .addgz {
                        display: none;
                        // display:inline-block;
                        position: absolute;
                        top: 10px;
                        left: 10px;
                        width: 52px;
                        height: 20px;
                        line-height: 20px;
                        color: #999999;
                        border: 1px solid #999;
                        text-decoration: none;
                        // opacity: 0;
                        border-radius: 20px;
                        text-align: center;
                        font-size: 12px;

                    }

                    .gzpeople {
                        display: none;
                        position: absolute;
                        color: #999;
                        top: 100px;
                        left: 135px;
                        font-weight: 500;
                        font-size: 12px;

                    }

                    .enterpp {
                        display: none;
                        // display: block;
                        margin: 0 auto;
                        width: 80px;
                        height: 36px;
                        box-sizing: border-box;
                        line-height: 32px;
                        color: #ff1e3c;
                        background-color: #fff;
                        text-decoration: none;
                        -webkit-border-radius: 32px;
                        -moz-border-radius: 32px;
                        border-radius: 32px;
                        border: 2px solid #ff1e3c;
                        font-size: 14px;
                        text-align: center;
                        position: absolute;
                        bottom: 6px;
                        left: 60px;
                    }


                }
            }


        }

    }

    .cnxh {
        width: 1100px;
        height: 445px;
        // border: $border-base2;
        margin-left: -6px;

        h4 {
            width: 1100px;
            height: 38px;
            padding: 20px 0px 5px;
            // border: $border-base2;
            font-size: 22px;
            font-weight: 700;

            span {
                font-size: 13px;
                font-weight: 400;
                padding: 0px 0px 0px 12px;
                color: #666666;
            }

        }

        .cnxh_list {
            width: 1100px;
            height: 382px;
            // border: $border-base1;
            display: flex;
            justify-content: space-between;

            li {
                width: 260px;
                height: 382px;
                // border: $border-base;

                .cnxh_img {
                    display: block;
                    width: 260px;
                    height: 260px;
                    //   border: $border-base1;
                    background: $color;
                    overflow: hidden;

                    img {
                        display: block;
                        width: 180px;
                        height: 180px;
                        margin: 40px 40px;
                    }
                }

                .cnxh_bt {

                    display: -webkit-box;
                    padding: 0 30px 0 0;
                    box-sizing: border-box;
                    font-weight: 700;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;

                    a {

                        font-size: 16px;
                        font-weight: 700;
                        line-height: 24px;
                        white-space: normal;


                    }


                }

                .cnxh_price {
                    font-size: 16px;
                    color: #ff1e32;
                    font-weight: 700;

                    span,
                    .cnxh_pj {
                        font-size: 12px;
                        color: #999999;

                        font-weight: 400;
                    }

                    span {
                        text-decoration: line-through;
                    }

                    .cnxh_pj {
                        display: inline-block;
                        margin-left: 100px;
                    }
                }


            }
        }


    }


}



/* 注册页面*/

#zc_header,
#zc_contain,
#zc_footer,
#dl_header,
#dl_contain,
.dl_footer {
    width: 1000px;
    margin: 0 auto;
    // border: $border-base2;

}

#zc_header_wrap,
#dl_header_wrap {
    background: $color;
}




#zc_header,
#dl_header {
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .zc_header_left {
        width: 330px;
        height: 65px;
        // border: $border-base2;
        background: url(../img/header/logo.png) no-repeat;
    }

    .zc_header_right {
        width: 504px;
        height: 100px;
        // border: $border-base2;
        background: url(../img/reg/zc2.png);
    }
}

#zc_contain,
#dl_contain {
    height: 600px;
    position: relative;

    .zc_contain_one {
        position: absolute;
        top: 50%;
        left: 10px;
        margin-top: -180px;
        width: 400px;
        height: 360px;
        // border: $border-base2;
        background: url(../img/reg/zc3.png) no-repeat center;

    }

    .zc_contain_two {
        width: 352px;
        height: 331px;
        // border: $border-base2;
        position: absolute;
        right: 20px;
        top: 100px;
        background: $color;

        .tsnr {
            width: 200px;
            height: 16px;
            display: block;
            // border: $border-base1;
            position: absolute;
            right: 90px;
            top: 125px;
        }

        h2 {
            width: 350.4px;
            height: 19.2px;
            // border: $border-base2;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            line-height: 19.2px;
            padding-top: 45px;
        }

        input {
            display: block;
            width: 235.4px;
            height: 36px;
            border: 1px solid#e9e9e9;
            padding-left: 35px;
            border-radius: 18px 18px;
            margin: 20px 40px;
            font-size: 14px;


        }

        #zc_btn {
            width: 270.4px;
            background: crimson;
            color: #fff;
            padding: 0;

        }

        span {
            width: 350px;
            height: 42px;
            // border: $border-base2;
            display: inline-block;
            position: absolute;
            bottom: 0px;
            right: 0px;

            ul {
                width: 190px;
                background: url(../img/reg/zc4.png) no-repeat;
                height: 22px;
                background-size: cover;
                // text-align: center;
                margin: 10px auto;

            }
        }

    }

}

#zc_footer,
#dl_footer #footer {
    height: 151.8px;
}


// 列表页
#index_banner {
    #slider1 {
        .xqlb_img {
            opacity: .9;
        }
    }
}


#xqlb_wrap {
    background: #F9B091;
}

#xqlb {
    width: 1090px;
    height: 1000px;
    background: #F9B091;
    // border: $border-base2;
    margin: 0 auto;

    .list {
        width: 1080px;
        height: 1000px;
        // border: $border-base1;
        padding: 0px 2.5px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;


        li {
            width: 243.75px;
            min-height: 329px;
            max-height: 380px;
            border: 1px solid rgb(249, 176, 145);
            // padding: 0 0 10px;
            background: #fff;
            // position: fixed;
            padding: 0 2.5px 5px;
            overflow: visible;
            position: relative;
            // float: left;
            margin: 0px 4px;



            &:hover {
                border: 1px solid #f00;

                .desc {
                    .desc_a {
                        height: 60px;
                        white-space: pre-wrap;
                        text-decoration: underline;

                    }

                }

            }

            .xqlb_list_a {
                width: 242px;
                height: 242px;

                img {
                    width: 241.75px;
                    height: 241.75px;
                    border: $border-base1;
                }
            }

            .desc {
                //  border: $border-base2;
                transition: .5s ease-out;
                // width: 221.75px;
                // height: 21.6px;
                margin: 3px 15px;

                .desc_a {
                    width: 211.75px;
                    height: 21.6px;
                    display: block;
                    color: #333;
                    font-size: 14px;
                    font-weight: 700;
                    overflow: hidden;
                    white-space: nowrap;
                }
            }

            h6 {
                height: 20px;
                margin: 0 15px 5px;
                color: #666;
                font-size: 12px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .xqlb_price {
                width: 211.75px;
                height: 22px;
                margin: 0 15px;
                height: 22px;
                overflow: hidden;
                white-space: normal;
                line-height: 22px;

                span {
                    &:nth-child(1) {
                        font-size: 20px;
                        font-weight: 700;
                        color: red;
                    }

                    &:nth-child(2) {
                        font-size: 14px;
                        color: #999;
                        text-decoration: line-through;
                    }
                }

            }

        }
    }
}


// 详情页

#kl_xq {
    width: 1090px;
    height: 1000px;
    margin: 0 auto;
    // border: $border-base2;
    background: $color;

    h3 {
        width: 1100px;
        height: 50px;
        margin: 10px 0;
        font-size: 26px;
        color: #ff3264;
        font-weight: 700;
        text-align: center;
        line-height: 50px;
        border-bottom: 1px solid#e9e9e9e9;
    }

    .kl_xq_left {
        width: 400px;
        height: 400px;
        // border: $border-base1;
        float: left;

        img {
            display: block;
            border: none;

        }

        #zoomBox {
            position: relative;
            width: 400px;
            height: 400px;

            #midArea,
            #midArea {
                img {
                    width: 400px;
                    height: 400px;
                    // border: $border-base2;

                }

                #zoom {
                    display: none;
                    position: absolute;
                    width: 200px;
                    height: 200px;
                    opacity: .5;
                    cursor: move;
                    background: yellow;
                }
            }

            #slt{
            
                width: 400px;
                height: 100px;
                border: $border-base1;
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin-top: 10px;
                img{
                    width: 80px;
                    height: 80px;
                    border: $border-base2;
                }
            }


        }

        #bigBox {
            display: none;
            position: absolute;
            width: 400px;
            height: 400px;
            left: 630px;
            top: 72px;
            border: 1px solid#f00;
            overflow: hidden;

            img {
                width: 800px;
                height: 800px;
                position: absolute;

            }
        }


    }

    .kl_xq_right {
        width: 660px;
        height: 800px;
        border: $border-base1;
        float: left;
        margin-left: 20px;
strong{
    display: block;
    width: 100px;
    height: 30px;
    // border: $border-base1;
    font-size: 26px;
    margin-top: 110px;
    margin-left: 100px;
    float: left;
    text-align: center;
}
        .xq_bt {
            width: 650px;
            height: 60px;
            // border: 1px solid#000;
            margin-top: 40px;
            margin-left: 5px;
            font-size: 16px;
            font-weight: 700;
            line-height: 50px;
            text-align: left;
            color: #333;

        }

        .xq_desc {
            width: 300px;
            height: 20px;
            // border: $border-base2;
            font-size: 13px;
            color: #333333;
        }

        .xq_price {
            width: 150px;
            height: 50px;
            // border: $border-base1;
            color: #ff3264;
            font-size: 26px;
            margin: 104px -30px;
            font-weight: 700;
            text-align: center;
            line-height: 50px;
            float: left;
        }

        .xq_shopcz {
            width: 1000px;
            height: 60px;
            // border: 1px solid#f00;
            display: flex;
            align-items: center;
            margin-left:100px;
            margin-top: 300px;

            span {
                width: 30px;
                height: 30px;
                border: 2px solid#888888;
                display: block;
                font-size: 30px;
                text-align: center;
                line-height: 30px;
                color: red;
            }

            .tex {
                width: 120px;
                height: 30px;
                text-align: center;
                border: 1px solid#f00;
            }

            .xq_btn {
                display:inline-block;
                width: 200px;
                height: 50px;
                background: #e31456;
                border: 1px solid#f00;
                color: $color;
                font-size: 26px;
                text-align: center;
                margin-left: 20px;
                line-height: 50px;
            }
        }

    }
}





//购物车

#kaola_shop_bt {
    h5 {
        width: 1090px;
        height: 50px;
        border: $border-base2;
        font-size: 26px;
        margin: 0px auto;
        text-align: center;
        line-height: 50px;
        background: #ff3264;
        color: #fff;
    }
}



#group_show {
    width: 1090px;
    min-height: 658.2px;
    border: 1px solid#8888;
    margin: 20px auto;

    .group_show_topz {
        height: 35.2px;
        border-bottom: 1px solid#8888;
        display: flex;

        .group_show_top {
            display: flex;
            width: 536.8px;
            height: 34px;
            // border: 1px solid#f00;

            align-items: center;

            input {
                width: 12.8px;
                height: 12.8px;
                display: inline-block;


            }

            h2 {
                display: block;
                margin-top: 18px;
                margin-left: 16px;
                font-size: 12px;
                width: 70px;
                height: 33.6px;
                font-weight: 700;

            }

            b {
                font-weight: 400;
                margin-left: 180px;
            }
        }

        .jmprice,
        .jmnum,
        .jmxj,
        .jmcz {

            font-size: 12px;
            // color: black;
            text-align: center;
            line-height: 35.2px;
        }

        .jmprice,
        .jmnum {
            width: 115.2px;
            height: 35.2px;
            /* border: 1px solid#000;    */
        }

        .jmxj {
            width: 96px;
            height: 35.2px;
            /* border: 1px solid#000;    */
        }

        .jmcz {
            width: 95.2px;
            height: 35.2px;
            /* border: 1px solid#000;    */
        }
    }

    .car_item {
        display: block;
        width: 1090px;
        height: 100.8px;
        border-bottom: 1px solid#8888;

        // border-top: 1px solid#8888;
        li {
            display: flex;

            &:nth-child(1) {
                width: 537.6px;
                height: 100.8px;
                // border: 1px solid#f00;
                float: left;

            }

            &:nth-child(2) {
                width: 115.2px;
                height: 100.8px;
                /* border: 1px solid#f00; */
                float: left;
            }

            &:nth-child(3) {
                width: 115.2px;
                height: 100.8px;
                /* border: 1px solid#f00; */
                float: left;
            }

            &:nth-child(4) {
                width: 96px;
                height: 100.8px;
                /* border: 1px solid#f00; */
                float: left;
            }

        }



    }

    .car_item_one {
        input {
            width: 12.8px;
            height: 12.8px;
            float: left;
            margin: 35px 5px;
        }

        p {
            width: 252px;
            height: 30px;
            // border: 1px solid#f00;
            margin: 30px 120px;
        }

    }


    .car_item_img {
        width: 60px;
        height: 60px;
        display: block;
        /* border: 1px solid#f00; */
        float: left;
        margin: 15px 10px;

    }

    .car_item_price {
        width: 75px;
        height: 13px;
        /* border: 1px solid#f00; */
        font-size: 12px;
        text-align: center;
        line-height: 13px;
        margin: 35px 15px;
    }

    .car_item_num {
        width: 80px;
        height: 24px;
        /* border: 1px solid#f00; */
        float: left;
        margin: 30px 15px;

        span {
            display: block;
            width: 22px;
            height: 22px;
            border: 1px solid#8888;
            float: left;
            text-align: center;
            line-height: 22px;

        }

        input {
            display: block;
            width: 32px;
            height: 24px;
            border: none;
            float: left;
            margin-top: 1px;
            text-align: center;
            line-height: 24px;
        }
    }

    .car_item_xj {
        width: 96px;
        height: 15px;
        /* border: 1px solid#000; */
        margin: 35px 0px;
        text-align: center;
        line-height: 15px;
        font-size: 12px;
        color: #ed145b;
    }

    .car_item_del {
        width: 30px;
        height: 20px;
        /* border: 1px solid#000; */
        font-size: 14px;
        margin: 33px 30px;

    }

    .car_item_foot {
        width: 1090px;
        height: 50px;
        border: 1px solid#f00;
        position: fixed;
        bottom: 0px;
        z-index: 99;
        background: #fafafa;

        .car_item_foot_one {
            width: 50px;
            height: 48px;
            /* border: 1px solid#f00; */
            margin-left: 5px;
            float: left;

            input {
                display: block;
                width: 12.8px;
                height: 12.8px;
                float: left;
                margin: 18px 0px;
            }

            span {
                font-size: 12px;
                float: left;
                width: 25px;
                height: 15px;
                /* border: 1px solid#f00; */
                margin: 15px 5px;
            }
        }

        .car_item_foot_two {
            width: 200px;
            height: 30px;
            /* border: 1px solid#000; */
            margin: 13px 15px;
            float: left;

            span {
                &:nth-child(1) {
                    display: block;
                    font-size: 12px;
                    width: 50px;
                    height: 20px;
                    float: left;
                    /* border: 1px solid#f00; */
                    margin: 3px 5px;

                }

                &:nth-child(2) {
                    font-size: 12px;
                    width: 72px;
                    height: 20px;
                    margin-top: -3px;
                    /* border: 1px solid#f00; */
                }
            }




        }

        .car_item_foot_three {
            width: 450px;
            height: 48px;
            /* border: 1px solid#f00; */
            float: right;

            p {
                width: 200px;
                height: 30px;
                /* border: 1px solid#000; */
                float: left;
                display: block;
                font-size: 14px;
                line-height: 30px;
                text-align: left;
                margin: 8px 0px;
            }

            span {
                &:nth-child(2) {
                    width: auto;
                    height: 24px;
                    /* border: 1px solid#000; */
                    color: #ed155b;
                    font-size: 20px;
                    float: left;
                    margin: 10px 1px;
                    font-weight: 600px;
                }


                &:nth-child(3) {
                    display: block;
                    width: 145px;
                    height: 48px;
                    background: #F8296D;
                    color: #fff;
                    font-size: 22px;
                    border: 1px solid#F8296D;
                    float: right;
                    text-align: center;
                    line-height: 48px;
                }
            }
        }




    }
}